<div *ngIf="!userFound">
  <mat-card align="center">
    <div>
      <h1>User not found</h1>
    </div>
    <div>
      <a routerLink="/projects">
        Navigate to search
      </a>
    </div>
  </mat-card>
</div>

<div *ngIf="userFound && user?.Id" fxLayout="row wrap" fxLayoutAlign="center">
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 25%" style="margin-left: auto">
    <app-profile-edit [user]="user" (onSelfSave)="refresh()"></app-profile-edit>

    <div id="all-calls-left" [attr.data-all-calls-left]="getAllCallsLeft()" style="margin-top: 4em" *ngIf="us.user?.Tokens?.length && author === us.user.Nick">
      <font size="6" style="color: green">{{getAllCallsLeft() | number:'.0-0'}}</font> calls left
    </div>

    <div style="margin-top: 2em" *ngIf="us.user?.Tokens?.length && author === us.user.Nick">

      <mat-form-field style="width: 100%">
        <span matPrefix>$</span>
        <input type="number" matInput placeholder="Buy {{amount/9 * 100000 | number:'.0-0'}} quota for ${{amount}}" [(ngModel)]="amount"
        />
      </mat-form-field>

      <button id="top-up" mat-raised-button class="button" color="accent" (click)="purchase()">Top up</button>
    </div>

  </div>
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 75%" ngClass.gt-sm="project-list" style="margin-bottom: 1em; padding-top: 0em">
    <mat-tab-group [(selectedIndex)]="selectedTabIndex">

      <mat-tab label="Projects">
        <mat-card style="margin-top: 2em">
          <app-project-list [projects]="projects"></app-project-list>
        </mat-card>
      </mat-tab>

      <mat-tab label="Blog">
        <mat-card style="margin-top: 2em">
          <app-posts [author]="author"></app-posts>
        </mat-card>
      </mat-tab>

      <mat-tab *ngIf="author === us.user.Nick" label="Tokens">
        <!-- workaround for bug https://github.com/angular/material2/issues/5269 -->
        <div style="margin-top: 2em; padding-bottom: 1em;" *ngIf="selectedTabIndex == 2">
          <!-- Blog removed for a while -->
          <app-tokens></app-tokens>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>